<template>
    <div>
        <Button
            @click="$emit('changeStep')"
            icon="ios-cloud-upload"
            class="button1"
            >上传图片</Button
        ><Button class="button2">
            <router-link to="/manage/MediaManage">媒体库管理</router-link>
        </Button>

        <Row>
            <i-col :span="6">
                <div
                    v-for="item in directory"
                    :key="item"
                    class="directoryBox"
                    @click="nowDirectory = item"
                >
                    <Icon
                        v-if="nowDirectory == item"
                        type="ios-folder-open"
                        class="cur"
                    />
                    <Icon
                        v-if="nowDirectory != item"
                        type="ios-folder"
                        class="icon"
                    />
                    {{ item }}
                </div>
                <div class="directoryBox" @click="nowDirectory = 1">
                    <Icon
                        v-if="nowDirectory == 1"
                        type="ios-folder-open"
                        class="cur"
                    />
                </div>
            </i-col>
            <i-col :span="18">
                <div class="gridbox">
                    <div
                        class="grid"
                        v-for="item in mediaArr"
                        :key="item.filename"
                    >
                        <Checkbox
                            class="checkbox"
                            :value="choosedfilename.includes(item.filename)"
                            @on-change="choosed($event, item.filename)"
                        ></Checkbox>
                        <span class="span">
                            {{ item.title }}
                        </span>
                        <img :src="baseurl + item.filename" alt="" />
                    </div></div
            ></i-col>
        </Row>
    </div>
</template>

<script>
import axios from "axios";
export default {
    props: ["arr"],
    data() {
        return {
            mediaArr: [],
            baseurl: "http://127.0.0.1:3000/",
            choosedfilename: [],
            directory: [],
            nowDirectory: ""
        };
    },
    async created() {
        // 以指定文件名查询数据库
        const mediaArr = await axios
            .get("/api/getdb?directory=" + this.nowDirectory)
            .then(data => data.data);
        this.mediaArr = mediaArr;
        // console.log(this.mediaArr);
        this.choosedfilename = [...this.arr];

        // 请求dr接口查询diractory
        const directory = await axios.get("/api/getdr").then(data => data.data);
        this.directory = directory;
    },
    methods: {
        choosed(event, filename) {
            if (event) {
                // 打钩了，推入数组
                this.choosedfilename.push(filename);
            } else {
                //没打勾，从数组中删除这项
                this.choosedfilename = this.choosedfilename.filter(
                    item => item != filename
                );
            }
        }
    },
    watch: {
        async nowDirectory(v) {
            // 以指定文件名查询数据库
            const mediaArr = await axios
                .get("/api/getdb?directory=" + v)
                .then(data => data.data);
            this.mediaArr = mediaArr;
            // console.log(this.mediaArr);
        }
    }
};
</script>

<style lang="less">
.gridbox {
    overflow: scroll;
    padding-bottom: 20px;
    max-height: 800px;

    .grid {
        float: left;
        margin-top: 10px;
        width: 100px;
        height: 100px;
        padding-bottom: 22px;
        margin-bottom: 15px;
        border: 1px solid rgb(185, 184, 184);
        margin-right: 10px;
        margin-block: 10px;
        position: relative;
        img {
            max-width: 100px;
            max-height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .span {
            position: absolute;
            width: 100%;
            color: black;
            // background-color: rgb(228, 227, 227);
            bottom: -25px;
            left: 0;
            font-size: 15px;
            text-align: center;
            text-shadow: rgb(250, 248, 248);
        }
        .checkbox {
            position: absolute;
            top: -1px;
            right: -7px;
        }
    }
}
.directoryBox {
    .icon {
        margin-right: 5px;
        background-color: white;
        color: rgb(116, 116, 204);
    }
    .cur {
        margin-right: 5px;
        background-color: white;
        color: rgb(116, 116, 204);
    }
    &:hover {
        color: rgb(244, 247, 74);
        background-color: white;
    }
    cursor: pointer;
}
.button1 {
    margin-bottom: 10px;
    margin-right: 30px;
}
.button2 {
    margin-bottom: 10px;
    margin-right: 30px;
}
</style>
